<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="nav_ul ma-bottom20">
      <el-breadcrumb-item :to="{ path: './welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-row  class="bo_20">
        <el-col>
          <el-button type="primary" @click="showAddCategories">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-row  class="bo_20">
        <el-col>
          <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" :show-index="true" index-text="#" :border="true" :show-row-hover="false">
            <!-- 是否有效 -->
            <template slot="isok" slot-scope="scope">
              <i class="el-icon-success col_1" v-if="scope.row.cat_deleted === false"></i>
              <i class="el-icon-error col_1" v-else></i>
            </template>
            <!-- 排序 -->
            <template slot="order" slot-scope="scope">
               <el-button type="primary" size="mini" v-if="scope.row.cat_level === 0">一级</el-button>
               <el-button type="success" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-button>
               <el-button type="warning" size="mini" v-else>三级</el-button>
            </template>
            <!-- 操作 -->
            <template slot="opt" slot-scope="scope">
               <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditCate(scope.row.cat_id)">编辑</el-button>
               <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCate(scope.row.cat_id)">删除</el-button>
            </template>
          </tree-table>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <el-row>
        <el-col>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="querInfo.pagenum"
              :page-sizes="[3, 5, 10]"
              :page-size="querInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
      <!-- 添加分类的对话框 -->
      <el-dialog
        title="添加分类"
        :visible.sync="addCategoriesOn"
        width="40%" class="ca_dialog" :before-close="closeCategories">
        <el-form :model="addCategoriesForm" :rules="addCategoriesRules" ref="addCategoriesRef" label-width="100px" class="demo-ruleForm">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="addCategoriesForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类">
            <!-- options 用来指定数据源 -->
            <!-- props 用来指定配置对象 -->
            <el-cascader
              v-model="selectedKeys" :options="parentCategoriesList" :props="cascaderProps"
              @change="parentCateChanged" class="ca_select" :clearable="true"></el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeCategories">取 消</el-button>
          <el-button type="primary" @click="addCate">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑分类的对话框 -->
      <el-dialog
        title="编辑分类"
        :visible.sync="editCategoriesOn"
        width="40%" class="ca_dialog" :before-close="closeEditCategories">
        <el-form :model="editCategoriesForm" ref="addCategoriesRef" label-width="100px">
          <el-form-item label="分类名称" prop="cat_name">
            <el-input v-model="editCategoriesForm.cat_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeEditCategories">取 消</el-button>
          <el-button type="primary" @click="editCateData">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      querInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      catelist: [], // 商品分类的数据列表，默认为空
      total: 0, // 总数据条数
      columns: [// 为table指定列的定义
        {
          label: '分类名称', // 列名称
          prop: 'cat_name' // 对应的数据名
        },
        {
          label: '是否有效',
          type: 'template', // 将当前列自定义模版列
          template: 'isok' // 模版名称
        },
        {
          label: '排序',
          type: 'template',
          template: 'order'
        },
        {
          label: '操作',
          minWidth: '170px',
          type: 'template',
          template: 'opt'
        }
      ],
      addCategoriesOn: false, // 控制添加分类对话框的显示与隐藏
      addCategoriesForm: { // 添加分类表单数据对象
        cat_name: '', // 将要提交的分类名称
        cat_pid: 0, // 分类父 ID
        cat_level: 0 // 分类当前层级
      },
      addCategoriesRules: { // 添加表单的验证规则对象
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ]
      },
      parentCategoriesList: [], // 父级分类数据列表
      cascaderProps: { // 指定级联选择器的配置对象
        value: 'cat_id', // 指定值
        label: 'cat_name', // 指定名称
        chdren: 'children', // 指定子数据
        expandTrigger: 'hover', // 使用hover触发
        checkStrictly: true // 选择任意一级选项
      },
      selectedKeys: [], // 选中的父级分类的ID数组
      editCategoriesOn: false, // 编辑分类对话框开关
      editCategoriesForm: { // 编辑分类表单数据对象
        cat_name: ''
      },
      editCategories: '' // 编辑分类
    }
  },
  created () {
    this.getCateList()
  },
  methods: {
    // 获取商品分类数据
    async getCateList () {
      const { data: res } = await this.$http.get('categories', { params: this.querInfo })
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.catelist = res.data.result
      this.total = res.data.total
      // this.$message.success(res.meta.msg)
    },
    handleSizeChange (val) { // 监听pagesize改变
      this.querInfo.pagesize = val
      this.getCateList()
    },
    handleCurrentChange (val) { // 监听pagesize改变
      this.querInfo.pagenum = val
      this.getCateList()
    },
    showAddCategories () { // 显示添加分类对话
      this.getParentCategories()
      this.addCategoriesOn = true
    },
    async getParentCategories () { // 获得父级分类的数据列表
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.parentCategoriesList = res.data
    },
    // 父级分类选项发生变化触发的函数
    parentCateChanged () {
      // 如果selectedKeys数组大于0，说明选中了父级分类,否则为没选
      if (this.selectedKeys.length > 0) {
        // 当前选中分类父 ID
        this.addCategoriesForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1]
        // 当前选中分类层级
        this.addCategoriesForm.cat_level = this.selectedKeys.length
      } else { // 没选则重置参数
        this.addCategoriesForm.cat_pid = 0
        this.addCategoriesForm.cat_level = 0
      }
    },
    // 关闭商品分类对话框
    closeCategories () {
      this.addCategoriesOn = false
      this.selectedKeys = []
      this.addCategoriesForm.cat_name = ''
      this.getCateList()
    },
    // 添加新的商品分类
    async addCate () {
      const { data: res } = await this.$http.post('categories', this.addCategoriesForm)
      if (res.meta.status !== 201) {
        return this.$message.error(res.meta.msg)
      }
      this.closeCategories()
      this.$message.success(res.meta.msg)
    },
    // 关闭编辑商品分类对话框
    closeEditCategories () {
      this.editCategoriesOn = false
      this.editCategoriesForm = {}
      this.getCateList()
    },
    // 显示编辑商品分类对话框
    async showEditCate (id) {
      const { data: res } = await this.$http.get('categories/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.editCategoriesForm = res.data
      this.editCategoriesOn = true
    },
    // 编辑分类数据提交
    async editCateData () {
      const { data: res } = await this.$http.put('categories/' + this.editCategoriesForm.cat_id, { cat_name: this.editCategoriesForm.cat_name })
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$message.success(res.meta.msg)
      this.closeEditCategories()
    },
    deleteCate (id) {
      this.$confirm('此操作将永久删除该商品分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.delete('categories/' + id)
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)
        this.getCateList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style scoped>
  .col_1 {color:#4caf50;}
  .bo_20 {margin-bottom:20px;}
  .ca_select {width:100%;}
</style>
